<template>
	<view class="pop-wrap" @touchmove.stop.prevent="moveHandle"  :animation='animationData' >
		<view class="pop-content pop-content-spec"> 
			<image class="pop-close" :src="popCloseIcon" @click="popSpecClose(false)"></image>
			<view class="spec-item">
				<image class="spec-item__img" :src="selectSku.skuImg"></image>
				<view class="spec-item__info">
					<view class="spec-item__price price yuan">{{selectSku.price | formatMoney}}</view>
					<view class="spec-item__spec">{{selectSku.skuName}}{{selectSku.stock}}</view>
				</view>
			</view>
			
			<scroll-view class="pop-scroll" :scroll-y="true">
				<view class="spec-type">
					<view class="spec-type__title"></view>
					<view class="spec-type__options">
						<text 
						v-for="item in sku" 
						:key='item.id' 
						:class="selectSkuId === item.id?'btn spec-type__option spec-type__options__active':'btn spec-type__option'"
						@click="setSku(item)"
						>{{item.skuName}}</text>
					</view>
				</view>
				
				<view class="spec-num">
					<view class="spec-num__title">购买数量<text class="text" style="display: none;">(限购1件)</text></view>
					<view class="spec-num__op">
						<view class="shop-num">
							<text class="op-num" @click="setNum('-')">-</text>
							<input class="num" v-model="num"  type="text" />
							<text class="op-num" @click="setNum('+')">+</text>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<!-- 选择规格 -->
			<view class="shop-btns__buy" v-if="opType===1">
				<view class="shop-btns__sub shop-btns__cart" @click="setIsSpec(true)">加入购物车</view>
				<view class="shop-btns__sub shop-btns__order" @click="setIsSpec(true)">立即购买</view>
			</view>
			<!-- 加入购物车 -->
			<view class="btn spec-btn-buy" style="background-color: #CFA972;" v-else-if="opType===2" @click="onceBuy('/pages/mine/orderConfirm')">加入购物车</view>
			<!-- 立即购买 -->
			<view class="btn spec-btn-buy" v-else-if="opType===3" @click="onceBuy('/pages/mine/orderConfirm')">立即购买</view>
		</view>
	</view>
</template>

<script>
	// 中间弹出的遮罩层
	import popCloseIcon from '../static/common/close.png'
	
	export default {
		props: {
			opType: Number,
			sku: Array,
			isSpec: Boolean,
			simpleInfo: Object, // 默认规格
			defaultSku: Object
		},
		data() {
			return {
				animationData: {},
				popCloseIcon,
				num: 1, // 产品数量
				selectSku: {
					skuName:'请选择规格',
					price:'',
					presentPrice:'',
					stock: 0,
					id: ''
				},
				selectSkuId: 1,
			}
		},
		
		updated() {
			this.selectSku = this.defaultSku
		},
		methods: {
			moveHandle() {},
			popSpecClose() {
				this.$emit('popSpecClose', false)
			},
			onceBuy(url) {
				this.$link(url)
			},
			setNum(type) {
				let num = parseInt(this.num)
				if(type === '-'){
					if(num > 1) {
						this.num = num - 1
					}
				}else{
					this.num = num + 1
				}
			},
			// 选择规格
			setSku(item) {
				console.log(item);
				this.selectSku = item
				console.log(this.selectSku);
			}
		},
		watch: {
			isSpec: function() {
				let animation = uni.createAnimation({
					duration: '400',
					timingFunction: 'ease-out'
				})
				if (this.isSpec) {
					this.animationData = animation.opacity(1).top(0).step().export()
				} else {
					this.animationData = animation.opacity(0).top('100%').step().export()
				}
			}
		}
	}
</script>

<style scoped lang="less">
	@import url('../app.less');
.pop-wrap {
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		top:100%;
		.flex-base;
		align-items: flex-end;
	}

	.pop-content {
		background-color: @f;
		border-radius: 10upx 10upx 0 0;
		width: 100%;
		max-height: 80%;
		position: relative;
		bottom: 0;
		padding: 20upx;
		box-sizing: border-box;
		padding-top: 30rpx;
	}

	.pop-title {
		.flex-base;
		.pop-title__t {
			flex-grow: 2;
			margin-right: 20upx;
			margin-bottom: 20upx;
		}
		
	}
	.pop-close {
		width: 30upx;
		height: 30upx;
		border-radius: 100%;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
	
	.shop-detail {
		background-color: @bg-dark-color;
	}
	
	.pop-content-spec{
		display: block;
		position: relative;
		padding: 0;
		.spec-item{
			width: 100%;
			.flex-base;
			padding: 30rpx;
			box-sizing: border-box;
			.bb;
		}
		.spec-item__img{
			width: 150rpx;
			height: 150rpx;
			.br;
		}
		.spec-item__info{
			flex-grow: 2;
			padding: 0 20rpx;
			box-sizing: border-box;
			.spec-item__spec{
				.f24;
				margin-top: 20rpx;
			}
		}
		.pop-scroll{
			padding: 0 30rpx;
			box-sizing: border-box;
		}
		.spec-type{
			.bb;
			padding: 30rpx 0;
			.spec-type__title{
				.f30;
				margin-bottom: 20rpx;
			}
		}
		.spec-type__options{
			.flex-base;
			flex-wrap: wrap;
			justify-content: flex-start;
		}
		.spec-type__option{
			height: 58rpx;
			line-height: 58rpx;
			background-color: @bg-dark-color;
			.f24;
			display: inline-block;
			margin-right: 20rpx;
			margin-bottom: 10rpx;
			color: @font-base-color;
		}
		.spec-type__option:nth-of-type(5n){
			margin-right: 0;
		}
		.spec-type__options__active{
			background-color: #fff9f2;
			border: 1px solid @font-orange-color;
			color:#cfa972;
			box-sizing: border-box;
		}
		.spec-num{
			.flex-base;
			.bb;
			height: 90rpx;
			.spec-num__title{
				.f30;
				.text{
					color:@theme-color
				}
			}
			.spec-num__op{}
		}
		.spec-btn-buy{
			margin: 30rpx auto;
			box-sizing: border-box;
			border-top: 1px solid @border-color;
			width: 690rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: @theme-color;
			color: @f;
			.f32;
		}
	}
	
	.pop-scroll{
		max-height: 60vh;
		text-align: justify;
		overflow: hidden;
	}
	
	.shop-btns__buy {
		height: 80upx;
		flex-grow: 2;
		border-radius: 200upx;
		color: @f;
		.f28;
		.flex-base;
		width: 690rpx;
		margin: 30rpx auto;
	}
	
	.shop-btns__sub {
		padding: 0 10rpx;
		box-sizing: border-box;
		width: 50%;
		height: 100%;
		line-height: 80upx;
		text-align: center;
	}
	
	.shop-btns__cart {
		background-color: @font-orange-color;
		border-radius: 200upx 0 0 200upx;
	}
	
	.shop-btns__order {
		background-color: @theme-color;
		border-radius: 0 200upx 200upx 0;
	}
</style>
